<template>
  <a-modal
    :title="`工作室${model && model.id > 0 ? '编辑' : '新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }" :selfUpdate="true">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="model && model.id > 0" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="工作室名称">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '工作室名称不能为空' }] }]"
            placeholder="请输入工作室名称"
          />
        </a-form-item>
        <a-form-item label="工作室级别">
          <a-select
            v-decorator="['levelId', { rules: [{ required: true, message: '请选择工作室名称级别' }] }]"
            placeholder="请选择工作室级别"
          >
            <a-select-option v-for="it in levelArr" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
          <!-- <a-input-number v-decorator="['levelNum', { rules: [{ required: true, message: '级别等级不能为空' }] }]" /> -->
        </a-form-item>
        <a-form-item label="工作室类型">
          <a-select
            v-decorator="['typeList', { rules: [{ required: true, message: '工作室类型不能为空' }] }]"
            :options="c_projectTypeList"
            placeholder="请选择工作室类型"
          ></a-select>
        </a-form-item>
        <a-form-item label="是否内部">
          <a-select
            v-decorator="['type']"
            :options="c_inOutTypeList"
            placeholder="是否是内部工作室"
          ></a-select>
        </a-form-item>
        <a-form-item label="地区">
          <a-cascader
            v-decorator="['address']"
            :options="cityArr"
            placeholder="地区"
            :fieldNames="{ label: 'name', children: 'children', value: 'name' }"
          />
        </a-form-item>
        <a-form-item label="月收费">
          <a-input-number
            v-decorator="['monthMoney']"
            :min="0"
            placeholder="请输入月收费"
            style="width: 150px"
            :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
          />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-decorator="['remark']" :rows="4" placeholder="请输入工作室描述" />
        </a-form-item>
        <!-- <a-form-item label="管理员" placeholder="请选择管理员" v-show="model && model.id > 0">
          <a-select 
          show-search
            placeholder="用户"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            
            @search="handleSearch"
            mode="multiple"
            v-decorator="['adminList']"
          >
            <a-select-option v-for="it in adminList" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import cloneDeep from 'lodash.clonedeep'
import { userListByNoAuth } from '@/api/noAuth'
import { cityArr } from '@/utils/ccity'
import { Cascader } from 'ant-design-vue'
// 表单字段
const fields = ['levelId', 'name', 'city', 'country', 'province', 'remark', 'teamUser', 'id', 'type'] // 'adminList'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    country: {
      type: Array,
      default: () => [],
    },
    provinceArr: {
      type: Array,
      default: () => [],
    },
    levelArr: {
      type: Array,
      default: () => [],
    },
    projectTypeList: {
      type: Array,
      default: () => [],
    },
    inOutTypeList: {
      type: Array,
      default: () => [],
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      city: '',
      adminList: [],
      cityArr,
    }
  },
  components: {
    'a-cascader': Cascader,
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      let data = pick(this.model, fields)
      data.typeList = this.model.typeList ? this.model.typeList[0].typeId : ''
      // data.adminList = data.adminList.map(v=>v.userId)
      // userListByNoAuth({pageNum:1,pageSize:100,studioId:data.id})
      // .then(res=>{
      //   this.adminList = res.data.data
      //   this.model && this.form.setFieldsValue(data)
      // })
      setTimeout(() => {
        this.model && this.form.setFieldsValue(data)
      }, 100)
      if (this.model && this.model.city && this.model.country && this.model.province) {
        setTimeout(() => {
          this.model &&
            this.form.setFieldsValue({ address: [this.model.country, this.model.province, this.model.city] })
        })
      }
    })
  },
  methods: {
    handleChange(value) {
      this.city = value
      this.form.setFieldsValue({ city: '' })
    },
    handleSearch(val) {
      userListByNoAuth({ name: val, pageNum: 1, pageSize: 100, studioId: this.form.getFieldValue('id') }).then(
        (res) => {
          this.adminList = res.data.data
        }
      )
    },
  },
  computed: {
    c_cityArr: function () {
      let provinceArr = cloneDeep(this.provinceArr)
      let queryParam = cloneDeep(this.city)
      if (queryParam) {
        let i = provinceArr.findIndex((v) => v.name == queryParam)
        return provinceArr[i].cityList
      } else {
        return []
      }
    },
    c_projectTypeList: function () {
      let projectTypeList = cloneDeep(this.projectTypeList)
      let arr = []
      projectTypeList.forEach((v) => {
        arr.push({
          value: v.id,
          label: v.name,
        })
      })
      return arr
    },
    c_inOutTypeList: function () {
      let inOutTypeList = cloneDeep(this.inOutTypeList)
      let arr = []
      inOutTypeList.forEach((v) => {
        arr.push({
          value: v.id,
          label: v.name,
        })
      })
      return arr
    },
    
  },
}
</script>
